<template>
  <div>
    <Card>
      <div slot="title">
        <Button type="success" @click="addClassifi">添加</Button>
        <!--<Button type="success">添加</Button>-->
        <!--<Button type="success">添加</Button>-->
      </div>
      <Table :data="listData" :columns="listColumns" stripe></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </div>
      </div>
    </Card>
    <Modal title="栏目编辑" v-model="onEdit" @on-ok="saveClass">
      <Form :model="classData" :label-width="60">
        <FormItem label="栏目名">
          <Input v-model="classData.name"></Input>
        </FormItem>
        <FormItem label="类型代码">
          <Input v-model="classData.sCode">
            <span slot="prepend">list/</span>
          </Input>
        </FormItem>
        <FormItem label="排序">
          <Input v-model="classData.seq" number></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  export default {
    name: "classification",
    data() {
      return {
        onEdit: false,
        classData: {},
        classNode: {
          id: '',
          name: '',
          code: '',
          sCode: '',
          seq: ''
        },
        limit: 0,
        page: 0,
        current: 1,
        total: 100,
        listData: [],
        listColumns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: "栏目名",
            key: "name"
          },
          {
            title: "栏目代码",
            key: "code"
          },
          {
            title: "排序",
            key: "seq"
          },
          {
            title: "操作",
            key: "action",
            width: 300,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      icon: "edit",
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.row);
                      }
                    }
                  },
                  "修改"
                ),
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      width: 200,
                      title: "您确认删除这条内容吗？"
                    },
                    on: {
                      'on-ok': () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  [h("Button", {
                    props: {
                      icon: "trash-a",
                      type: "error",
                      size: "small"
                    }
                  },"删除")]
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.limit = 10;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.mockListData();
      },
      mockListData() {
        this.$axios({
          method: 'get',
          url: '/api/class',
          params: {
            cust: '0',
            page: this.page,
            limit: this.limit
          }
        }).then((res) => {
          this.listData = res.data.result;
        }).catch((error) => {
          this.$Notice.error({
            title: '加载失败!'
          });
          console.log(error);
        });
      },
      addClassifi() {
        this.onEdit = true;
        this.classData = Object.assign({}, this.classNode);
      },
      show(item) {
        this.onEdit = true;
        this.classData = Object.assign({}, item);
        this.classData.sCode = item.code.split(/\//)[1];
      },
      remove(id) {
        this.$axios({
          method: 'delete',
          url: '/api/class/'+ id
        }).then(res => {
          this.$Notice.success({
            title: '删除成功!'
          });
          this.init();
        }).catch(error => {
          this.$Notice.error({
            title: '删除失败!'
          });
        });
      },
      saveClass() {
        this.classData.code = 'list/'+this.classData.sCode;
        this.$axios({
          method: 'post',
          url: '/api/class/'+ this.classData.id,
          data: {
            classData: this.classData
          }
        }).then(res => {
          this.$Notice.success({
            title: '保存成功!'
          });
          this.init();
        }).catch(error => {
          this.$Notice.error({
            title: '保存失败!'
          });
        });
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData();
      },
      changePageSize(size) {
        this.limit = size;
        this.changePage(1);
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
